JSX

• JSX 是 react 專用的 Javascript 語法擴充，將 HTML 語法整合進 js 檔裡，但僅適用在開發編寫時使用，若要在瀏覽器中執行，則需要利用 Babel 轉譯成 javasript 語法。
• 在 html 標記中要撰寫 javascript 程式碼，需要將其放入{}大括號中。

<button onClick={callbackfunc} style={props.style}>{props.text}</button>

• 註解亦可放入{}大括號中，建議使用多行註解。( 使用 { // 單行註解 } 會產生問題 )

<div>
   {/* 多行註解 */}
   {
      // 單行註解
   }
</div>

• render()函式僅能回傳單一節點，有兩個以上的節點，必須將其包覆在另一個標籤中。

// 錯誤
var Component = React.creatClass({
   render: function() {
      return (
        <h1>title</h1>
        <p>article</p>
      );
   }
});

// 正確
var Component = React.creatClass({
   render: function() {
      return (
        <div>
        <h1>title</h1>
        <p>article</p>
        </div>
      );
   }
});

• HTML 所有的標籤都需要加上關閉標籤。( <標籤 /> 或 <標籤>內容</標籤> )
• 設定 CSS 的style屬性是物件形式，以逗號區隔，且 CSS 的特性名稱需使用小駝峰式。

<li style={{fontSize:'16px', color:'black'}}>項目</li>

// 外層 {} 是 JSX 用來包裹 JS 程式碼，內層 {} 是代表 JS 物件